<template>
      <div class="waves">
        <div class="wave" id="wave1"></div>
        <div class="wave" id="wave2"></div>
        <div class="wave" id="wave3"></div>
        <div class="wave" id="wave4"></div>
      </div>
  </template>

<script>
export default {
  name: 'Wave',
};
</script>

<style>
.waves {
    position: fixed;
    left: 0;
    bottom: 0; 
    width: 100%;
    height: auto;
}

 .waves .wave{
    position: absolute;
    width: 100%;
    height: 200px;
    left: 0;
    bottom: 0;
    background-image: url(/src/assets/img/wave.png);
    background-size: 1000px 200px;
}

 .waves .wave#wave1
{
    opacity: 1;
    bottom: 0;
    z-index: 1000;
    animation: animate 4s linear infinite; 
}

 .waves .wave#wave2
{
    opacity:  .5;
    bottom: 10px;
    z-index: 999;
    animation: animate2 4s linear infinite; 
}

 .waves .wave#wave3
{
    opacity:  .2;
    bottom: 15px;
    z-index: 998;
    animation: animate 2s linear infinite; 
}

 .waves .wave#wave4
{
    opacity:  .7;
    bottom: 20px;
    z-index: 999;
    animation: animate2 2s linear infinite; 
}

@keyframes animate
{
    0%
    {
        background-position-x: 1000px;
    }
    100%
    {
        background-position-x: 0px;
    }
}

@keyframes animate2
{
    0%
    {
        background-position-x: 0px;
    }
    100%
    {
        background-position-x: 1000px;
    }
}

.stars
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    mix-blend-mode: screen;
}
</style>
